<!--
 * @Author: 白袂 1741866590@qq.com
 * @Date: 2023-09-12 17:03:44
 * @LastEditors: 白袂 1741866590@qq.com
 * @LastEditTime: 2024-05-10 14:03:49
 * @FilePath: \obj_system\src\views\login\Sign.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="sign">
         <h1>餐&nbsp;厅&nbsp;后&nbsp;台&nbsp;管&nbsp;理&nbsp;系&nbsp;统</h1>
        <h1>注册</h1>
        <el-form :model="ruleForms" status-icon :rules="rules" ref="ruleForms" label-width="100px" class="demo-ruleForm" key="signCode">
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="grid-content bg-purple">
                        <el-form-item label="用户名" prop="userName" >
                            <el-input type="text" v-model="ruleForms.userName"  id="userName" placeholder="请输入用户名"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content bg-purple">
                        <el-form-item label="密码" prop="userPsd">
                            <el-input type="password" v-model="ruleForms.userPsd"  id="userPsd" placeholder="请输入密码"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
                 <el-col :span="12">
                    <div class="grid-content bg-purple">
                        <el-form-item label="确认密码" prop="surePsd" >
                            <el-input type="password" v-model="ruleForms.surePsd"  id="surePsd" placeholder="请再次输入密码"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
                 <el-col :span="12">
                    <div class="grid-content bg-purple">
                         <el-form-item label="商家名称" prop="merchant_name" >
                            <el-input type="text" v-model="ruleForms.merchant_name" autocomplete="off" id="userName" placeholder="请输入用户名"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
                 <el-col :span="12">
                    <div class="grid-content bg-purple">
                         <el-form-item label="手机号" prop="merchant_phone" >
                            <el-input type="text" v-model="ruleForms.merchant_phone"  id="userName" placeholder="请输入用户名"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
                 <el-col :span="12">
                    <div class="grid-content bg-purple">
                         <el-form-item label="地址" prop="merchant_adress" >
                            <el-input type="text" v-model="ruleForms.merchant_adress" id="userName" placeholder="请输入用户名"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
                 <el-col :span="12">
                    <div class="grid-content bg-purple">
                        <el-form-item label="详细地址" prop="merchant_detail_adress" >
                            <el-input type="text" v-model="ruleForms.merchant_detail_adress"  id="userName" placeholder="请输入用户名"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
             <el-col :span="24">
                <div class="grid-content bg-purple">
                     <el-button type="primary" @click="submitForm('ruleForms')">注册</el-button>
                     <el-button @click="resetForm('ruleForms')">重置</el-button>
                </div>
            </el-col>
               <el-col :span="24">
                <div class="grid-content bg-purple">

                <p>已经有账号？<u @click="getlogin">点击登录</u></p>
                </div>
            </el-col>
            </el-form>
        
    </div>
</template>

<script>
import axios from 'axios';

export default {
    name: "Sign",
        data() {

            return {
                ruleForms: {
                    userName: '',
                    userPsd: '',
                    surePsd: '',
                    identity: '2',
                    merchant_name: '',
                    merchant_phone: '',
                    merchant_adress: '',
                    merchant_detail_adress: ''
                },
                rules: {
                    userName: [
                        {  required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                    userPsd: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ],
                    surePsd: [
                        { required: true, message: '请再次输入密码', trigger: 'blur' }
                    ],
                    merchant_name: [{ required: true, message: '请输入商家名称', trigger: 'blur' }],
                    merchant_phone: [{ required: true, message: '手机号', trigger: 'blur' }],
                    merchant_adress: [{ required: true, message: '地址', trigger: 'blur' }],
                    merchant_detail_adress: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],

                }
            };
        },
    

        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if(valid) {
                        //密码是否一致
                        
                        if(this.ruleForms.userPsd !=  this.ruleForms.surePsd) {
                            this.$message.error('两次输入的密码不一致，请重新输入');
                            return;
                        }
                        console.log(this.ruleForms.merchant_phone);
                        if( !this.validatePhoneNumber(this.ruleForms.merchant_phone)) {
                            this.$message.error('请输入合法的手机号');
                            return;
                        }
                        
                        //post请求
                        axios({
                            method: "post",
                            url: "/merchant/sign",
                            data: {
                                user_name: this.ruleForms.userName,
                                password: this.ruleForms.userPsd,
                                merchant_name: this.ruleForms.merchant_name,
                                merchant_phone: this.ruleForms.merchant_phone,
                                merchant_adress: this.ruleForms.merchant_adress,
                                merchant_detail_adress: this.ruleForms.merchant_detail_adress,
                                role_id: 2   //默认
                            }
                        }).then(res => {
                            console.log("res", res);
                            if(res.data.code == 200) {
                                // 注册成功
                                this.$message({
                                    message: '注册成功',
                                    type: 'success'
                                });

                                let getlocal = localStorage.getItem("localUser");
                                if (getlocal != "") {
                                    localStorage.removeItem("localUser");
                                } 
                                let localUser = {
                                    user: this.ruleForms.userName,
                                    role: 2,
                                    user_id: res.data.user_id
                                }
                                // this.setUser(localUser); // 调用 action 来设置用户信息  
                                localStorage.setItem("localUser", JSON.stringify(localUser));
                                location.href = "/";
                                        
                            } else if (res.data.code == 401) {
                                //密码错误
                                this.$message({
                                    showClose: true,
                                    message: '用户已存在',
                                    type: 'warning'
                                });
                            } 
                            else {
                                //用户不存在
                                this.$message.error('注册失败，请重试');
                            }
                            
                        }).catch(err => {
                        
                            this.$message.error(err);
                            
                        })

                    }
                   






                    })
          
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            
            getlogin() {
                 this.$router.push("/login");
            },
            validatePhoneNumber(phoneNumber) {  
                // 中国的手机号通常是11位数字，第一位是1，第二位可以是3-9中的任何一个数字  
                // 正则表达式：以1开头，第二位是3-9，其余是0-9的数字，共11位  
                var regex = /^1[3-9]\d{9}$/;  
                return regex.test(phoneNumber);  
            }  

        },
}
    
    
        
    

</script>

<style scoped>
.sign {
    width: 700px;
}

h1 {
    padding-bottom: 40px;
    text-align: center;
    color: #3170a7;
    opacity: 0.5;
}

p {
    font-size: 12px;
    text-align: right;
    color: #409EFF;
    
}

p u {
    cursor: pointer;
}
</style>